<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<Link Rel="ICON NAME" href="img/title.jpg">
<title>shellingfordly</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="icon/iconfont.css">
<link href="css/shellingfordly.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/cityCode.js"></script>
</head>
<body>
    <!--== 头部 欢迎词 ==-->
    <header>
        <div class="welcome">
            <span>Welcome To My Blog</span>
            <span>Nice To Meet You</span>
        </div>
    </header>
    <!--== 头部 end ==-->

    <!--== 内容分类 begin ==-->
    <section class="category clearfix">
        <!-- mylife -->
        <div class="box fl">
            <div class="line lifeline"></div>
            <div class="mylife webbox">
                <a class="newweb" href="#mylife">
                    <span class="posi">my life</span>
                    <span class="auti">If by life you were deceived. Don't be dismal,don't be wild</span>
                </a>
            </div>
        </div>
        <!-- study -->
        <div class="box fl">
            <div class="line studyline"></div>
            <div class="study webbox">
                <a class="newweb" href="#studylife">
                    <span class="posi">always study</span>
                    <span class="auti">Diligence is the path to the mountain of knowledge，hard-working is the boat to the endless sea of learning.</span>
                </a>
            </div>
        </div>
        <!-- the far afield -->
        <div class="box fl">
            <div class="line farline"></div>
            <div class="far webbox">
                <a class="newweb" href="#farafield">
                    <span class="posi">far afield</span>
                    <span class="auti">Beyond the pots and pans in present, there should be poetry and the far afield in our lives.</span>
                </a>
            </div>
        </div>
        <!-- street life -->
        <div class="box fl">
            <div class="line streetline"></div>
            <div class="street webbox">
                <a class="newweb" href="#lifenofear">
                    <span class="posi">no fear</span>
                    <span class="auti">A living, is constantly challenging, constantly climbing fate topped peaks.</span>
                </a>
            </div>
        </div>
    </section>
    <!--== 内容分类 end ==-->

    <!--== 具体内容 begin ==-->
    <!-- studylife -->
    <section id="studylife" class="thelife">
        <!-- 标题 -->
        <div class="title stitle">
            <h1>Endless learning</h1>
            <div title="韩愈">
                <p class="subtitle">书山有路勤为径，学海无涯苦作舟。</p>
            </div>
        </div>
        <!-- 多媒体 -->
        <div class="multimedia">
            <!-- 音乐播放器 -->
            <div class="music sbox fl" title="所有音频均来自QQ音乐">
                    <!-- 歌曲信息 -->
                    <div class="wrapper clearfix">
                        <audio id="audio"></audio>
                        <!-- 歌曲图片 -->
                        <div class="musicimg fl"></div>
                        <!-- 歌名、歌手 -->
                        <div class="details fl">
                            <p class="musicname" title="">正在搜索</p>
                            <p class="musicer" title="">正在搜索</p>
                        </div>
                    </div>
                    <!-- 进度条 -->
                    <span class="basebar">
                        <span class="progressbar"></span>
                    </span>
                    <!-- 播放、下一曲、上一曲、音量 -->
                    <div class="controls">
                        <i class="iconfont icon-prev btn1" title="上一曲"></i>
                        <i class="iconfont icon-bofang btn2" title="播放/暂停"></i>
                        <i class="iconfont icon-shangyiqu btn3" title="下一曲"></i>
                        <i class="iconfont icon-yinliang" title="音量"></i>
                    </div>
            </div>
            <!-- 天气 -->
            <div class="weather sbox fl">
                <div class="w-info">
                    <p id="date">1998/06/10</p>
                    <p id="day">星期三</p>
                    <p id="time">12:30</p>
                    <p>温度：<span id="temp">正在查询</span></p>
                    <p><span id="weather">正在查询</span><i id="icon-w" class="iconfont icon-dengdai"></i></p>
                </div>
                <div class="w-ganmao">
                    <p class="hight">正在查询</p>
                    <p class="lowt">正在查询</p>
                    <p class="ganmao">天气晴朗当然要到出去啦！天气不好的话在家追剧也不错~~~</p>
                </div>
            </div>
            <!-- other -->
            <div class="other sbox fl">
                <p class="more"><a href="">more about front-end</a></p>
            </div>
        </div>
    </section>
    <!-- lifenofear -->
    <section id="lifenofear">
        <div class="nofeartitle standtitle">
            <h1>Life Without Fear</h1>
            <!-- 副标题 -->
            <p class="subtitle"><span>喜欢就去做</span>不要害怕别人的眼光</p>
            <p class="text">人生本来就是一场冒险，我们都是打败了上亿的对手来到这个世界上的，生来既是强者。 何惧这世界的挫折，生而无惧，死而无畏。</p>
        </div>
    </section>
    <!-- farafield -->
    <section id="farafield" class="thelife" title="此版块语录均出自大冰">
        <!-- 标题 -->
        <div class="title fartitle">
            <h1>Far Afield</h1>
            <!-- 副标题 -->
            <p class="subtitle">不要那么孤单，请相信，这个世界上真的有人过着你想要的生活。</p>
        </div>
        <!-- 照片墙 -->
        <div class="farimg clearfix">
            <div class="fl">
                <a href="">
                    <img src="img/01.jpg" alt="">
                    <p>愿你我可以带着最微薄的行李和最丰盛的自己在世间流浪</p>
                </a>
            </div>
            <div class="fl">
                <a href="">
                    <img src="img/02.jpg" alt="">
                    <p>缘生缘浅，缘聚缘散，惜缘随缘莫攀缘。</p>
                </a>
            </div>
            <div class="fl">
                <a href="">
                    <img src="img/03.jpg" alt="">
                    <p>浪迹天涯的孩子，忽晴忽雨的江湖，祝你有梦为马，随处可栖</p>
                </a>
            </div>
            <div class="fl">
                <a href="">
                    <img src="img/04.jpg" alt="">
                    <p>没有人告诉我，很多人一辈子只能遇见一次，擦肩而过就是杳然一生</p>
                </a>
            </div>
            <div class="fl">
                <a href="">
                    <img src="img/05.jpg" alt="">
                    <p>陪我到可可西里看一看海，不要未来，只要你来。</p>
                </a>
            </div>
            <div class="fl">
                <a href="">
                    <img src="img/06.jpg" alt="">
                    <p>生如逆旅单行道，哪有岁月可回头。</p>
                </a>
            </div>
        </div>
    </section>
    <!-- mylife -->
    <section id="mylife">
        <div class="mylifetitle standtitle">
            <h1>My Life</h1>
            <!-- 副标题 -->
            <p class="subtitle"><span>人生像一个圈</span>最后又回到了原点</p>
            <div class="mybox">
                <div class="run">
                    <i id="me" class="iconfont icon-paobu1"></i>
                </div>
                <div class="text">
                    <p>我不知道未来是什么样子</p>
                    <p>我不知道我会成为什么人</p>
                    <p>我不知道能和谁相守一生</p>
                    <p>我不知道要去到哪</p>
                    <p>我不知道在哪停留</p>
                    <p>我不知道这旅途的终点在哪</p>
                    <p>我只知道一直向前奔跑</p>
                    <p>再不后头</p>
                    <p>即使错过一些美丽的风景</p>
                </div>
            </div>
        </div>
    </section>
    <!--== 具体内容 end ==-->

    <!--== 留言板 begin ==-->
    <section id="messageboard"></section>
    <!--== 留言板 end ==-->

    <!--== 底部 begin ==-->
    <footer>
        <div id="topping">^</div>
        <div class="iconbox">
            <a href="https://github.com/shellingfordly" title="github"><i class="iconfont icon-github"></i></a>
            <a href="http://m.facebook.com/home.php#_=_" title="facebook"><i class="iconfont icon-Ankerwebicon-"></i></a>
            <a href="http://www.cnblogs.com/shellingfordly/" title="我的博客"><i class="iconfont icon-boke"></i></a>
            <a href=""><i class="iconfont icon-weixin" title="暂时没有微信信息"></i></a>
            <a href="https://weibo.com/shellingfordly" title="微博"><i class="iconfont icon-weibo"></i></a>
            <a href="https://plus.google.com/118335826055459150008" title="google+"><i class="iconfont icon-guge"></i></a>
        </div>
        <div class="mood">
            <p>Do what you want to do, love those who want to love. If there is no dream, what is the difference with salted fish.</p>
            <p class="views">visited <span class="times">0</span> times</p>
            <p class="date">shellingfordly©&nbsp;&nbsp;&nbsp;2018/07/31</p>
        </div>
    </footer>
    <!--== 底部 end ==-->


<script src="js/shellingfordly.js"></script>
</body>
</html>
